<template>
    <!-- 弹窗组件 -->
    <div class="box" v-show="controlShow">
        <div class="mask" @click.stop="close"></div>
        <div class="context">
            <div class="textbox">
                <div class="title" v-if="dialogData.title">
                    {{ dialogData.title }}
                </div>
                <div class="text">{{ dialogData.message }}</div>
            </div>
            <div class="buttons">
                <div class="buttonall button-l" @click="close">
                    <van-button type="default"><span>{{ dialogData.confirmButtonText }}</span></van-button>
                </div>
                <div class="buttonall button-r" @click="confirmEvent">
                    <van-button type="default"><span>{{ dialogData.cancelButtonText }}</span></van-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "LogoutNotarize",
        props: {
            dialogData: Object,
            controlShow: Boolean,
        },
        data() {
            return {};
        },
        methods: {
            close() {
                this.controlShow = false;
            },
            confirmEvent() {
                this.dialogData.confirmEvent();
                this.close();
            },
        },
    };
</script>
<style scoped lang="less">
    .box {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        z-index: 1402;

        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #00000060;
            z-index: 1402;
            transition: 300ms;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .context {
            background-color: #fff;
            display: flex;
            flex-direction: column;
            z-index: 1403;
            border-radius: 15px;
            width: 580px;
            justify-content: center;

            .textbox {
                padding: 40px 40px;
                padding-bottom: 20px;
                font-size: 30px;

                .title {
                    color: #333;
                    font-size: 34px;
                    font-weight: 600;
                    padding: 40px 0;
                    padding-top: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .text {
                    color: #666666;
                    line-height: 46px;
                    font-size: 30px;
                }
            }

            .buttons {
                width: 100%;
                display: flex;
                font-size: 34px;

                .buttonall {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    min-width: 50%;
                    max-width: 100%;
                    padding: 30px 10px;
                }

                .button-l {
                    .van-button {
                        background-color: #acacac;
                        color: #fff;
                        width: 210px;
                        height: 80px;
                        font-size: 30px;
                        border-radius: 999px;
                        margin-right: -20px;
                    }
                }

                .button-r {
                    .van-button {
                        background-color: #e8340a;
                        color: #fff;
                        width: 210px;
                        height: 80px;
                        font-size: 30px;
                        border-radius: 999px;
                        margin-left: -20px;
                    }
                }
            }
        }
    }
</style>